<template>
	<view class="wrapper">
		<!-- 头部导航 -->
		<!-- <view class="header-bag">
			<image src="/static/icon-Get-into@3.png" class="back" @click="goBack"></image>
			<view class="header-center">
				<text>提交认证</text>
			</view>
		</view> -->

		<!-- 认证表单 -->
		<view class="renzheng-inf" v-if="!showResult">
			<text class="renz-f">请确保姓名、身份证号、银行卡开户人为同一人</text>
			
			<view class="renz-t">
				<view class="form-item">
					<text class="label">真实姓名</text>
					<input class="input" v-model="formData.realname" placeholder="请填写姓名" />
				</view>
				<view class="form-item">
					<text class="label">证件类型</text>
					<text class="value">身份证</text>
				</view>
				<view class="form-item">
					<text class="label">证件号</text>
					<input class="input" v-model="formData.id_number" placeholder="点击填写证件号" />
				</view>
			</view>

			<view class="renz-t" v-if="!isCloudWorker">
				<view class="form-item-spb">
					<text class="label">开户银行</text>
					<picker @change="onBankChange" :value="bankIndex" :range="bankList">
						<view class="picker">
							{{ selectedBank || '请选择' }}
							<image src="/static/icons/icon-gengduo@2x.png" class="arrow"></image>
						</view>
					</picker>
				</view>
				<view class="form-item">
					<text class="label">银行卡号</text>
					<input class="input" v-model="formData.bank_num" @input="formatBankNo" placeholder="请填写储蓄卡号" />
				</view>
			</view>
		</view>

		<!-- 提交按钮和注意事项 -->
		<view class="annotation" v-if="!showResult">
			<button class="submit-btn" @click="submitAuth">实名认证并绑定</button>
			<text class="note">注:</text>
			<text class="note">1、仅可使用储蓄卡，请不要填写信用卡</text>
			<text class="note" v-if="!isCloudWorker">2、仅支持开户银行列表内的30家银行</text>
		</view>

		<!-- 认证成功结果 -->
		<view class="result-box" v-if="showResult">
			<view class="result">
				<view class="result-inf">
					<view class="result-img">
						<image src="/static/wancheng.png" alt=""></image>
					</view>
					<text class="success-text">认证成功</text>
				</view>
			</view>
			
			<view class="renzheng-inf">
				<text class="renz-f">认证信息</text>
				<view class="renz-t">
					<view class="form-item">
						<text class="label">真实姓名</text>
						<text class="value">{{ resultData.realname }}</text>
					</view>
					<view class="form-item">
						<text class="label">证件类型</text>
						<text class="value">身份证</text>
					</view>
					<view class="form-item">
						<text class="label">证件号码</text>
						<text class="value">{{ maskIdNumber(resultData.id_number) }}</text>
					</view>
					<view class="form-item" v-if="resultData.bank_num">
						<text class="label">银行卡号</text>
						<text class="value">{{ maskBankNumber(resultData.bank_num) }}</text>
					</view>
				</view>
			</view>
			
			<button class="next-btn" @click="goNext">下一步</button>
		</view>
	</view>
</template>

<script>
import { identityApi } from '@/api/index.js'

export default {
	data() {
		return {
			formData: {
				realname: '',
				id_number: '',
				bank_num: '',
				bank_name: ''
			},
			bankList: [
				'请选择', '锦州银行', '工商银行', '农业银行', '中国银行', '建设银行',
				'邮政储蓄银行', '交通银行', '中信银行', '光大银行', '华夏银行',
				'民生银行', '广发银行', '平安银行', '招商银行', '兴业银行',
				'浦发银行', '渤海银行', '恒丰银行', '浙商银行', '北京银行',
				'上海银行', '南京银行', '江苏银行', '徽商银行', '天津银行',
				'重庆银行', '河北银行', '内蒙古银行', '吉林银行', '湖北银行', '晋商银行'
			],
			bankIndex: 0,
			selectedBank: '请选择',
			showResult: false,
			resultData: {},
			isCloudWorker: false
		}
	},
	
	onLoad(options) {
		// 检查是否是云主申请页面跳转过来的
		this.isCloudWorker = options.nextpage === 'apply_cloudWorker.html'
		this.loadIdentityInfo()
	},
	
	methods: {
		// 返回上一页
		goBack() {
			uni.navigateBack()
		},
		
		// 加载认证信息
		async loadIdentityInfo() {
			try {
				const res = await identityApi.getIdentityInfo()
				if (res.r === 0) {
					const data = res.data
					if (data.is_checked === 1) {
						// 已认证，显示结果页面
						this.showResult = true
						this.resultData = {
							realname: data.realname,
							id_number: data.id_number,
							bank_num: data.card_num || ''
						}
					}
				}
			} catch (error) {
				console.error('获取认证信息失败:', error)
			}
		},
		
		// 银行选择
		onBankChange(e) {
			this.bankIndex = e.detail.value
			this.selectedBank = this.bankList[e.detail.value]
			this.formData.bank_name = this.selectedBank
		},
		
		// 格式化银行卡号
		formatBankNo(e) {
			let value = e.detail.value.replace(/\s/g, '').replace(/(.{4})/g, '$1 ')
			if (value.endsWith(' ')) {
				value = value.slice(0, -1)
			}
			this.formData.bank_num = value
		},
		
		// 提交认证
		async submitAuth() {
			// 表单验证
			if (!this.formData.realname.trim()) {
				uni.showToast({ title: '真实姓名不能为空', icon: 'none' })
				return
			}
			
			if (!this.formData.id_number.trim()) {
				uni.showToast({ title: '身份证号不能为空', icon: 'none' })
				return
			}
			
			// 身份证号格式验证
			const regIdNo = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
			if (!regIdNo.test(this.formData.id_number)) {
				uni.showToast({ title: '身份证号码或格式不正确', icon: 'none' })
				return
			}
			
			// 非云主申请需要验证银行信息
			if (!this.isCloudWorker) {
				if (this.selectedBank === '请选择') {
					uni.showToast({ title: '银行名称不能为空', icon: 'none' })
					return
				}
				
				if (!this.formData.bank_num.trim()) {
					uni.showToast({ title: '银行卡号不能为空', icon: 'none' })
					return
				}
			}
			
			try {
				uni.showLoading({ title: '提交中...' })
				
				const submitData = {
					realname: this.formData.realname,
					id_number: this.formData.id_number,
					bank_num: this.formData.bank_num.replace(/\s/g, ''),
					bank_name: this.formData.bank_name
				}
				
				let res
				if (this.isCloudWorker) {
					res = await identityApi.staffRealIdentity(submitData)
				} else {
					res = await identityApi.realIdentity(submitData)
				}
				
				uni.hideLoading()
				
				if (res.r < 0) {
					uni.showToast({ title: res.msg, icon: 'none' })
				} else if (res.r === 0) {
					// 认证成功，显示结果页面
					this.showResult = true
					this.resultData = {
						realname: this.formData.realname,
						id_number: this.formData.id_number,
						bank_num: this.formData.bank_num
					}
					
					// 如果有下一页参数，3秒后自动跳转
					const pages = getCurrentPages()
					const currentPage = pages[pages.length - 1]
					const nextpage = currentPage.options.nextpage
					
					if (nextpage) {
						setTimeout(() => {
							uni.navigateTo({ url: `/${nextpage}` })
						}, 3000)
					}
				}
			} catch (error) {
				uni.hideLoading()
				uni.showToast({ title: '提交失败，请重试', icon: 'none' })
				console.error('提交认证失败:', error)
			}
		},
		
		// 下一步
		goNext() {
			uni.navigateTo({ url: '/pages/identity/apply_cloudWorker' })
		},
		
		// 遮罩身份证号
		maskIdNumber(idNumber) {
			if (!idNumber) return ''
			const len = idNumber.length
			let star = ''
			for (let i = 1; i < len - 1; i++) {
				star += '*'
			}
			return idNumber[0] + star + idNumber.substr(len - 1)
		},
		
		// 遮罩银行卡号
		maskBankNumber(bankNumber) {
			if (!bankNumber) return '您还没有绑定银行卡'
			let star = ''
			for (let i = 0; i < bankNumber.length - 4; i++) {
				if (bankNumber[i] === ' ') {
					star += ' '
				} else {
					star += '*'
				}
			}
			return star + bankNumber.substr(bankNumber.length - 4)
		}
	}
}
</script>

<style scoped>
.wrapper {
	background-color: #EEEEEE;
	min-height: 100vh;
}

.header-bag {
	display: flex;
	align-items: center;
	padding: 20rpx 30rpx;
	background: #fff;
	position: relative;
}

.back {
	width: 40rpx;
	height: 40rpx;
}

.header-center {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	font-size: 36rpx;
	font-weight: bold;
}

.renzheng-inf {
	background: #fff;
	margin: 20rpx;
	padding: 30rpx;
	border-radius: 10rpx;
}

.renz-f {
	color: #666;
	font-size: 28rpx;
	margin-bottom: 30rpx;
	display: block;
}

.renz-t {
	margin-bottom: 40rpx;
}

.form-item {
	display: flex;
	align-items: center;
	padding: 30rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
}
.form-item-spb {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
}

.form-item:last-child {
	border-bottom: none;
}

.label {
	width: 200rpx;
	color: #4B4B4B;
	font-size: 30rpx;
}

.input {
	flex: 1;
	color: #909090;
	font-size: 30rpx;
	
}

.value {
	flex: 1;
	color: #909090;
	font-size: 30rpx;
}

.picker {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	color: #909090;
	font-size: 30rpx;
}

.arrow {
	width: 30rpx;
	height: 30rpx;
	margin-left: 20rpx;
}

.annotation {
	padding: 30rpx;
}

.submit-btn {
	width: 100%;
	background: linear-gradient(to right, #ff6b6b, #ff8e8e);
	color: #fff;
	border: none;
	border-radius: 50rpx;
	height: 88rpx;
	line-height: 88rpx;
	font-size: 32rpx;
	margin-bottom: 30rpx;
}

.note {
	display: block;
	color: #999;
	font-size: 24rpx;
	margin-bottom: 10rpx;
}

.result-box {
	padding: 30rpx;
}

.result {
	background: #fff;
	border-radius: 10rpx;
	padding: 60rpx 30rpx;
	text-align: center;
	margin-bottom: 30rpx;
}

.result-img {
	margin-bottom: 30rpx;
}

.result-img image {
	width: 120rpx;
	height: 120rpx;
}

.success-text {
	font-size: 80rpx;
	color: #333;
}

.next-btn {
	width: 100%;
	background: linear-gradient(to right, #ff6b6b, #ff8e8e);
	color: #fff;
	border: none;
	border-radius: 50rpx;
	height: 88rpx;
	line-height: 88rpx;
	font-size: 32rpx;
	margin-top: 30rpx;
}
</style>